<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">

    <ui:composition template="#{contextPath}/layouts/default.xhtml">
        <ui:define name="title">#{text['userProfile.title']}</ui:define>
        <ui:param name="menu" value="UserMenu"/>
        <ui:define name="resources">
            <script type="text/javascript" src="#{contextPath}/scripts/userImage.js"></script>
            <script type="text/javascript" src="#{contextPath}/scripts/crypto.js"></script>
        </ui:define>

        <ui:define name="body">
            <c:set var="delObject" value="#{text['userList.user']}"/>
            <script type="text/javascript">var msgDelConfirm =
                        "<h:outputFormat value="#{text['delete.confirm']}"><f:param value="#{delObject}" /></h:outputFormat>";</script>

            <div class="col-sm-2">
                <h2>#{text['userProfile.heading']}</h2>
                <c:choose>
                    <c:when test="${param.from == 'list' or empty userForm.user.id}">
                        <h:outputText value="#{text['userProfile.admin.message']}"/>
                    </c:when>
                    <c:otherwise><h:outputText value="#{text['userProfile.message']}"/></c:otherwise>
                </c:choose>
            </div>
            <div class="col-sm-7">

                <h:form id="userForm" styleClass="well" autocomplete="off">
                    <h:inputHidden value="#{userForm.user.id}" id="id"/>
                    <h:inputHidden value="#{userForm.user.version}" id="version"/>

                    <h:inputHidden value="#{userForm.user.password}" id="originalPassword"/>
                    <input type="hidden" name="from" value="#{userForm.from}" />

                    <c:if test="${userForm.rememberMe}">
                        <h:inputHidden value="#{userForm.user.password}" id="password"/>
                        <h:inputHidden value="#{userForm.user.confirmPassword}" id="confirmPassword"/>
                    </c:if>

                    <c:if test="${empty userForm.user.version}">
                        <input type="hidden" name="encryptPass" value="true" />
                    </c:if>

                    <c:set var="addText" value="#{text['button.add']}"/>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="username" value="#{text['user.username']}"/>
                        <h:inputText styleClass="form-control" value="#{userForm.user.username}" id="username" required="true"/>
                        <p:message for="username"/>
                    </div>

                    <c:if test="${!userForm.rememberMe}">
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <h:outputLabel styleClass="control-label" for="password" value="#{text['user.password']}"/>
                                <h:inputSecret styleClass="form-control" value="#{userForm.user.password}" id="password" redisplay="true" required="true"/>
                                <p:message for="password"/>
                            </div>
                            <div class="col-sm-6 form-group">
                                <h:outputLabel styleClass="control-label" for="confirmPassword" value="#{text['user.confirmPassword']}"/>
                                <h:inputSecret styleClass="form-control" value="#{userForm.user.confirmPassword}" id="confirmPassword" redisplay="true" required="true">
                                    <!--p:validateEqual for="password"/-->
                                </h:inputSecret>
                                <p:message for="confirmPassword"/>
                            </div>
                        </div>
                    </c:if>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="passwordHint" value="#{text['user.passwordHint']}"/>
                        <h:inputText styleClass="form-control" value="#{userForm.user.passwordHint}" id="passwordHint" required="true"/>
                        <p:message for="passwordHint"/>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="reference" value="#{text['user.reference']}"/>
                        <h:inputText styleClass="form-control" value="#{userForm.user.reference}" id="reference"/>
                        <p:message for="reference"/>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="firstName" value="#{text['user.firstName']}"/>
                            <h:inputText styleClass="form-control" id="firstName" value="#{userForm.user.firstName}" maxlength="50" required="true"/>
                            <p:message for="firstName"/>
                        </div>
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="lastName" value="#{text['user.lastName']}"/>
                            <h:inputText styleClass="form-control" value="#{userForm.user.lastName}" id="lastName" maxlength="50" required="true"/>
                            <p:message for="lastName"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="email" value="#{text['user.email']}"/>
                            <h:inputText styleClass="form-control" value="#{userForm.user.email}" id="email" required="true">
                                <!-- Ref.: http://stackoverflow.com/questions/7875108/email-validation-using-regular-expression-in-jsf-2-primefaces -->
                                <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                <!--f:validator validatorId="org.apache.myfaces.validator.Email"/-->
                            </h:inputText>
                            <p:message for="email"/>
                        </div>
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="phoneNumber" value="#{text['user.phoneNumber']}"/>
                            <h:inputText styleClass="form-control" value="#{userForm.user.phoneNumber}" id="phoneNumber">
                                <f:validateRegex pattern="^(\d{4})[-| ]?(\d{4})$"/>
                            </h:inputText>
                            <p:message for="phoneNumber"/>
                        </div>
                    </div>

                    <!--div class="form-group">
                        <h:outputLabel styleClass="control-label" value="#{text['user.image']}"/>
                        <h:inputText styleClass="form-control" value="#{userForm.user.image}" id="image"/> 
                        <input type='file' id="myFile" class="form-control"/>
                    </div-->

                    <!--div class="form-group">
                        <img id="imageUser" src="#" alt="Imagen Usuario" style="border:1px solid !important; width: 50px; height: 50px;"/>
                        <h:inputHidden id="imageSource" value="#{userForm.imageSource}"/>
                    </div-->

                    <!--div class="form-group">
                        <h:outputLabel styleClass="control-label" for="website" value="#{text['user.website']}"/>
                        <h:inputText styleClass="form-control" value="#{userForm.user.website}" id="website" required="true"/>
                        <p:message for="website"/>
                    </div-->

                    <c:if test="${param.from == 'list' or param['editUser:add'] == addText}">
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <h:outputLabel styleClass="control-label" for="department" value="#{text['user.department']}"/>
                                <h:selectOneMenu value="#{userForm.user.department}" id="department" styleClass="form-control" style="height: 38px">
                                    <f:selectItem itemLabel=""/>
                                    <t:selectItems value="#{userForm.departments}" var="department" itemLabel="#{department.description}" itemValue="#{department}"/>
                                    <f:converter converterId="objconverter"/>
                                </h:selectOneMenu>                            
                                <p:message for="department"/>
                            </div>  
                            <div class="col-sm-6 form-group">
                                <h:outputLabel styleClass="control-label" for="area" value="#{text['user.area']}"/>
                                <h:selectOneMenu value="#{userForm.user.area}" id="area" styleClass="form-control" style="height: 38px">
                                    <f:selectItem itemLabel=""/>
                                    <t:selectItems value="#{userForm.areas}" var="area" itemLabel="#{area.name}" itemValue="#{area}"/>
                                    <f:converter converterId="objconverter"/>
                                </h:selectOneMenu>
                                <p:message for="area"/>
                            </div>
                        </div>  

                        <div class="form-group">
                            <h:outputLabel styleClass="control-label" for="supervisor" value="#{text['user.supervisor']}"/>
                            <h:selectOneMenu value="#{userForm.user.supervisor}" id="supervisor" styleClass="form-control" style="height: 38px">
                                <f:selectItem itemLabel=""/>
                                <t:selectItems value="#{userForm.supervisors}" var="supervisor" itemLabel="#{supervisor.fullName}" itemValue="#{supervisor}"/>
                                <f:converter converterId="objconverter"/>
                            </h:selectOneMenu>
                            <p:message for="supervisor"/>
                        </div>
                    </c:if>

                    <fieldset>
                        <legend class="accordion-heading">
                            <a data-toggle="collapse" href="#collapse-address"><h:outputText value="#{text['user.address.address']}"/></a>
                        </legend>
                        <div id="collapse-address" class="accordion-body collapse">
                            <div class="form-group">
                                <h:outputLabel styleClass="control-label" for="address" value="#{text['user.address.address']}"/>
                                <h:inputText styleClass="form-control" value="#{userForm.user.address.address}" id="address"/>
                                <p:message for="address"/>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 form-group">
                                    <h:outputLabel styleClass="control-label" for="city" value="#{text['user.address.city']}"/>
                                    <h:inputText styleClass="form-control" value="#{userForm.user.address.city}" id="city"/>
                                    <p:message for="city"/>
                                </div>
                                <div class="col-sm-6 form-group">
                                    <h:outputLabel styleClass="control-label" for="province" value="#{text['user.address.province']}"/>
                                    <h:inputText styleClass="form-control" value="#{userForm.user.address.province}" id="province"/>
                                    <p:message for="province"/>
                                </div>
                                <!--div class="col-sm-3 form-group">
                                    <h:outputLabel styleClass="control-label" for="postalCode" value="#{text['user.address.postalCode']}"/>
                                    <h:inputText styleClass="form-control" value="#{userForm.user.address.postalCode}" id="postalCode">
                                        <f:validateRegex pattern="^\d{5}\d*$"/>
                                    </h:inputText>
                                    <p:message for="postalCode"/>
                                </div-->
                            </div>
                            <div class="form-group">
                                <h:outputLabel styleClass="control-label" for="country" value="#{text['user.address.country']}"/>
                                <h:selectOneMenu value="#{userForm.country}" id="country" styleClass="form-control" style="height: 38px">
                                    <f:selectItems value="#{userForm.countries}"/>
                                </h:selectOneMenu>
                                <p:message for="country"/>
                            </div>
                        </div>
                    </fieldset>                  

                    <c:if test="${param.from == 'list' or param['editUser:add'] == addText}">
                        <div class="form-group">
                            <h:outputLabel styleClass="control-label" for="allowedIps" value="#{text['user.allowedIps']}"/>
                            <h:inputText styleClass="form-control" value="#{userForm.user.allowedIps}" id="allowedIps"/>
                            <p:message for="allowedIps"/>
                        </div>
                    </c:if>
                    <h:inputHidden value="#{userForm.user.status}"/>
                    <h:inputHidden value="#{userForm.user.reference}"/>

                    <c:choose>
                        <c:when test="${param.from == 'list' or param['editUser:add'] == addText}">
                            <h:panelGroup styleClass="form-group" layout="block">
                                <fieldset>
                                    <legend><h:outputText value="#{text['userProfile.accountSettings']}"/></legend>
                                    <h:outputLabel styleClass="checkbox" for="enabled" value="#{text['user.enabled']}">
                                        <h:selectBooleanCheckbox value="#{userForm.user.enabled}" id="enabled" styleClass="checkbox"/>
                                    </h:outputLabel>

                                    <h:outputLabel styleClass="checkbox" for="accountExpired" value="#{text['user.accountExpired']}">
                                        <h:selectBooleanCheckbox value="#{userForm.user.accountExpired}" id="accountExpired" styleClass="checkbox"/>
                                    </h:outputLabel>

                                    <h:outputLabel styleClass="checkbox" for="accountLocked" value="#{text['user.accountLocked']}">
                                        <h:selectBooleanCheckbox value="#{userForm.user.accountLocked}" id="accountLocked" styleClass="checkbox"/>
                                    </h:outputLabel>

                                    <h:outputLabel styleClass="checkbox" for="credentialsExpired" value="#{text['user.credentialsExpired']}">
                                        <h:selectBooleanCheckbox value="#{userForm.user.credentialsExpired}" id="credentialsExpired" styleClass="checkbox"/>
                                    </h:outputLabel>
                                </fieldset>
                            </h:panelGroup>
                            <h:panelGroup styleClass="form-group" layout="block">
                                <fieldset>
                                    <legend>#{text['userProfile.assignRoles']}</legend>
                                    <h:selectManyCheckbox value="#{userForm.userRoles}" id="userRoles" layout="pageDirection">
                                        <f:selectItems value="#{userForm.availableRoles}"/>
                                    </h:selectManyCheckbox>
                                </fieldset>
                            </h:panelGroup>
                        </c:when>
                        <c:otherwise>
                            <h:panelGroup styleClass="form-group" layout="block">
                                <strong>#{text['user.roles']}:</strong>
                                <c:if test="${not empty param['userForm:userRoles']}">
                                    ${param['userForm:userRoles']}
                                    <input type="hidden" name="userForm:userRoles" value="${param['userForm:userRoles']}" />
                                </c:if>
                                <c:forEach var="role" items="#{userForm.userRoles}" varStatus="status">
                                    ${role}<c:if test="${!status.last}">,</c:if>
                                    <input type="hidden" name="userForm:userRoles" value="${role}" />
                                </c:forEach>
                                <h:inputHidden value="#{userForm.user.enabled}"/>
                                <h:inputHidden value="#{userForm.user.accountExpired}"/>
                                <h:inputHidden value="#{userForm.user.accountLocked}"/>
                                <h:inputHidden value="#{userForm.user.credentialsExpired}"/>
                            </h:panelGroup>
                        </c:otherwise>
                    </c:choose>

                    <div class="form-group form-actions">
                        <h:commandButton value="#{text['button.save']}" action="#{userForm.save}" styleClass="btn btn-primary"/>

                    <!-- Todo: hide this button when the user's id is not assigned. Wrapping it with <c:if test="${not empty userForm.user.id}"> or
                         rendered="${not empty userForm.user.id}" causes this button to not call the delete() method in UserForm.  -->
                        <h:commandButton value="#{text['button.delete']}" action="#{userForm.delete}"
                                         styleClass="btn btn-default" onclick="return confirmMessage(msgDelConfirm)"/>

                        <h:commandButton value="#{text['button.cancel']}" action="#{userForm.cancel}" immediate="true"
                                         styleClass="btn btn-default"/>
                    </div>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>
